<template>
  <div class="page-content">
    <el-dialog :title="title" :visible.sync="dialogVisible" width="900px" :before-close="tableClose">
      <el-form :model="addInfo" status-icon :rules="rules" ref="addFormRef" label-width="80px" class="demo-addInfo">
        <el-row>
          <el-col :span="12">
            <el-form-item label="基地id" prop="baseId">
              <el-input v-model="addInfo.shipmentEntryBillDto.baseId" disabled></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="基地名称" prop="baseName">
              <el-input v-model="addInfo.baseName"></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>

        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="目的地" prop="destination">
              <el-input v-model="addInfo.destination" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="经手人" prop="handler">
              <el-input v-model="addInfo.shipmentEntryBillDto.handler" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="类型" prop="type">
              <el-input v-model="addInfo.shipmentEntryBillDto.type" placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" :rows="1" v-model="addInfo.shipmentEntryBaseDtoList.remark" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">订单详情</el-divider>
        <el-row>
          <el-col :span="8" v-for="(item, index) in addInfo.shipmentEntryBaseDtoList" :key="item.key" style="border-bottom: 1px solid #f0f0f0; padding: 10px">
            <el-card :body-style="{ padding: '0px' }" class="card">
              <div>

                <el-row>
                  <el-form-item :label="'备注'" :prop="'shipmentEntryBaseDtoList.' + index + '.remark'">
                    <el-input type="textarea" :rows="1" placeholder="请输入备注" v-model="item.remark"></el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item :label="'typeName'" :prop="
                          'shipmentEntryBaseDtoList.' + index + '.typeName'
                        " :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: 'blur',
                        }">
                    <el-input placeholder="请输入typeName" v-model="item.typeName"></el-input>
                  </el-form-item>
                </el-row>
                <el-row style="margin-bottom: 10px">
                  <el-col :span="12">
                    <el-button style="margin-left: 60%" @click="openDetail(item)" type="success" plain icon="el-icon-edit"></el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button style="margin-left: 10%" @click.prevent="removeDomain(item)" type="danger" icon="el-icon-delete" plain></el-button>
                  </el-col>
                </el-row>
              </div>
            </el-card>

            <!-- 鸽棚详情表单区域结束 -->
          </el-col>
        </el-row>
        <el-form-item>
          <el-row>
            <el-col :span="8">
              <el-button type="primary" @click="addOrderInfo('addInfo')">提交</el-button>
            </el-col>

          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { AddStorage } from "@/api/Dovecote/ProductionCount/ShipmentOutBill.js";
export default {
  name: "StorageForm",
  props: {
    addInfo: {
      Object,
      default: {},
    },
    dialogVisible: {
      Boolean,
      default: false,
    },
    editFrom: {
      Object,
      default: {},
    },
    //表名
    title: {
      String,
      default: "",
    },
  },
  data() {
    return {
      titleName: "鸽棚详情",
      dialogFrom: false,

      text:{addInfo:{}},
      //表单规则
      rules: {
        baseName: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        handler: [
          {
              // required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {},
  methods: {

    
    //添加订单
    addOrderInfo() {
      this.$refs["addFormRef"].validate(async (valid) => {
        if (valid) {
          console.log("kkk", this.addInfo);
          this.text.addInfo = this.addInfo
          const { data: res } = await AddStorage(this.text);
          console.log(res);
          if (res.statusCode === 20000) {
            this.$message.success("增加成功");
            this.closeform();
          } else {
            if (res.data == null) {
              return this.$message.error("添加失败");
            }
          }
        }
      });
    },
    
    //重置
    resetForm() {
      this.$nextTick(() => {
        this.$refs.addFormRef.resetFields();
      });
    },
    //删除记录
    removeDomain(item) {
      var index = this.addInfo.dovecoteOutBillDtoList.indexOf(item);
      if (index !== -1) {
        this.addInfo.dovecoteOutBillDtoList.splice(index, 1);
      }
    },
    removeDetail(item, person) {
      var index = this.addInfo.dovecoteOutBillDtoList.indexOf(item);
      var k =
        this.addInfo.dovecoteOutBillDtoList[
          index
        ].dovecoteOutBaseDtoList.indexOf(person);
      if (k !== -1) {
        this.addInfo.dovecoteOutBillDtoList[
          index
        ].dovecoteOutBaseDtoList.splice(k, 1);
      }
    },



    //关闭表单
    closeform() {
      var a = false;
      this.$emit("closeAddDialog", a);
      this.DisplayData();
      this.resetForm();
    },
      //弹窗新增详情记录
      addDomain() {
        this.addInfo.shipmentEntryBaseDtoList.push({
          type: "种鸽",
          typeName: "",
          unitPrice: "",
          amount: "",
          remark: "",
        });
      },

    // 关闭弹窗
    tableClose() {
      this.$confirm("确认关闭？")
        .then(() => {
          this.closeform();
        })
          .catch(() => { });
    },



    //关闭详情表单
    closeDetail() {
      this.dialogFrom = false;
    },
    //关闭详情弹窗
    detailClose() {
      this.$confirm("确认关闭？")
        .then(() => {
          this.closeDetail();
        })
          .catch(() => { });
    },
  },
};

</script>

<style scoped>
.card {
  padding-right: 10px;
  background-image: url("../../../assets/image/background.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>